---
title: Angular
description: Angular Migration | Transloco Angular i18n
---

:::info
some manual changes might still be needed after the script ran.
:::

The script will iterate over all your HTML files, build a  translation file and will execute the replacements described below.

### Command
`ng g @ngneat/transloco:migrate`

### The Translation file

The script will extract all the translations from the HTML files and will construct a translations JSON file.
The script will use the translation string as the key by making the entire string kebab case (`My sample string` => `my-sample-string`) example for the output JSON:

```json title="en.json"
{
  "my-sample-string": "My sample string",
  "my-title": "My title"
}
```

Here is an example of an `HTML` section and the matching `JSON` output:

```html
<h1 i18n>translation value</h1>
<h1 i18n="site header|value 1 sample">Val1</h1>
<h1 i18n="site header|value 2 sample">Val2</h1>
<h1 i18n="other context|another comment@@myId">Val3</h1>
```

Will output:
```json title="en.json"
{
  "translation-value": "translation value",
  "site header": {
     "val1": "Val1",
     "val1.comment": "value 1 sample",
     "val2": "Val2",
     "val2.comment": "value 2 sample",
  },
  "other context": {
     "myId": "Val3",
     "myId.comment": "another comment"
  }
}
```

Note: the `.comment` is the way we support [comments](../tools/comments) in Transloco.

### Directives

The `i18n` & `i18n-<attribute>` directives will be replaced with the `transloco` pipe:

```html title="before.html"
<h1 i18n>Hello World</h1>
<h1 i18n="other context|another comment@@myId">Some value</h1>
<img src="..." i18n i18n-title="Wow image">
```

```html title="after.html"
<h1>{{ 'hello-world' | transloco }}</h1>
<h1>{{ 'some-value' | transloco }}</h1>
<img src="..." title="{{ 'wow-image' | transloco }}">
```

If you encounter any issues with the migration script please open a Github issue so we can resolve them and make a better experience for all.


